<script>
import { dateBetweenChange, inputChange } from "@/mixins/tagmixin";
import { Bus } from "@/utils/bus";

const commonMixin = {
  props: {
    data: {
      type: Object,
      required: true,
    },
    disabled: {
      default: false,
    },
  },
  methods: {
    busEmitChange() {
      Bus.$emit("memberChange");
    },
  },
};

// number/enum
export const MultiSelect = {
  mixins: [commonMixin],
  render() {
    return (
      <el-select
        vModel={this.data.valArray}
        disabled={this.disabled}
        allowCreate={this.data.multipleList.length === 0}
        placeholder={this.data.multipleList.length === 0 ? "请输入" : "请选择"}
        clearable
        multiple
        filterable
        vOn:change={(val) =>
          inputChange(val, this.data.valArray, this.data.multipleList)
        }
      >
        {this.data.multipleList.map((item) => {
          return (
            <el-option
              key={item.value}
              label={item.label}
              value={item.value}
            ></el-option>
          );
        })}
      </el-select>
    );
  },
};

// 时间-在xx天之前/之内
export const InputSingle = {
  mixins: [commonMixin],
  render() {
    return (
      <el-input-number
        vModel={this.data.valArray[0]}
        controls-position="right"
        min={1}
        disabled={this.disabled}
        vOn:change={this.busEmitChange}
      ></el-input-number>
    );
  },
};
// 时间-在过去/未来XX天至过去/未来XX天之内
export const InputBetween = {
  mixins: [commonMixin],
  render() {
    return (
      <div class="combine-container">
        <el-input-number
          vModel={this.data.valArray[0]}
          controls-position="right"
          min={0}
          disabled={this.disabled}
          vOn:change={(val) =>
            dateBetweenChange(val, 0, this.data.valArray, this.data.property)
          }
        />
        <span class="unitl">至</span>
        <el-input-number
          vModel={this.data.valArray[1]}
          controls-position="right"
          min={0}
          disabled={this.disabled}
          vOn:change={(val) =>
            dateBetweenChange(val, 1, this.data.valArray, this.data.property)
          }
        />
      </div>
    );
  },
};

export const Between = {
  mixins: [commonMixin],
  render() {
    return (
      <div class="combine-container">
        <el-input-number
          vModel={this.data.valArray[0]}
          controls-position="right"
          min={0}
          disabled={this.disabled}
          vOn:change={(val) =>
            dateBetweenChange(val, 0, this.data.valArray, this.data.property)
          }
        />
        <span class="unitl">与</span>
        <el-input-number
          vModel={this.data.valArray[1]}
          controls-position="right"
          min={0}
          disabled={this.disabled}
          vOn:change={(val) =>
            dateBetweenChange(val, 1, this.data.valArray, this.data.property)
          }
        />
        <span>之</span>
        <span>间</span>
      </div>
    );
  },
};

// time  生日 valueFormat为月日
export const Time = {
  mixins: [commonMixin],
  render() {
    return (
      <el-date-picker
        vModel={this.data.valArray[0]}
        disabled={this.disabled}
        valueFormat={"yyyy-MM-dd"}
        type="date"
        placeholder="选择日期时间"
        vOn:change={this.busEmitChange}
      ></el-date-picker>
    );
  },
};

// 字符正则
export const Input = {
  mixins: [commonMixin],
  render() {
    return (
      <el-input
        vModel={this.data.valArray[0]}
        disabled={this.disabled}
        vOn:change={this.busEmitChange}
      ></el-input>
    );
  },
};

// 字符弹框多选
export const MultiDialog = {
  mixins: [commonMixin],
  inject: ["openGoodsDialog"],
  render() {
    return (
      <div vOn:click={() => !this.disabled && this.openGoodsDialog(this.data)}>
        <el-input
          vModel={this.data.valArrayName}
          disabled={this.disabled}
          placeholder="请输入"
          readonly
          clearable
        />
      </div>
    );
  },
};

const componentMap = {
  enum: MultiSelect,
  number: MultiSelect,
  input_single: InputSingle,
  input_between: InputBetween,
  between: Between,
  date: Time,
  input: Input,
  multiple: MultiDialog,
};

export default {
  name: "GlobalComponentLibrary",
  functional: true,
  render(h, { data, props }) {
    const is = props.is || componentMap[(props.data || {}).type] || "div";
    return is ? h("component", { ...data, is }) : null;
  },
};
</script>

<style lang="scss" scoped>
.combine-container {
  display: flex;
  align-items: center;
  > div {
    display: flex;
    align-items: center;
  }
}

::v-deep {
  .unitl {
    margin: 0 5px;
  }
}
</style>
